<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>周钦</title>
    <link rel="stylesheet" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .dingbudaohanglan{
            width: 100%;
            height: 42px;
            color: #9d9d9d;
            background-color: #222;
        }
        .hezi{
            width: 75%;
            height: 42px;
            margin: 0 auto;
        }
        .dingbudaohanglan .hezi .wenzi:first-child{
            font-size: 18px;
        }
        .dingbudaohanglan .hezi .wenzi{
            display: inline-block;
            padding: 0 10px;
            line-height: 42px;
        }
        .dingbudaohanglan .hezi .wenzi:last-child{
            padding-left: 200px;
        }
        .col-xs-12 .thumbnail{
            height: 380px;
        }
        .guanggao{
            width: 100%;
            height: 500px;
            background: linear-gradient(
45deg
,#020031,#6d3353);
        }
        .biaoti{
            width: 100%;
            height: 300px;
        }
        .container-fluid{
            padding-left: 200px;
            background-color: rgb(32, 30, 30);
        }
        .hidden-sm{
            padding-right: 100px;
        }
        .jumbotron{
          text-align: center;
          color: #fff;
          /* background: url(../img/bs-docs-masthead-pattern.png) repeat 50%; */
          background: linear-gradient(45deg,#020031,#6d3353);
          /* background: url(../img/bs-docs-masthead-pattern.png) repeat 50%; */
          margin-top: -25px;
        }
        .jumbotron a{
          color: #ffffff80;
        }
    </style>
</head>

<body>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand hidden-sm" href="#">Bootstrap中文网</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="#">Bootstrap3中文文档</a></li>
                    <li><a href="#">Bootstrap4中文文档</a></li>
                    <li><a href="#">Sass教程</a></li>
                    <li><a href="#">Less教程</a></li>
                    <li><a href="#">jQuery API</a></li>
                    <li><a href="#">网站实例</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li class="hidden-sm"><a href="#">关于</a></li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
    <div class="jumbotron">
        <h1>Bootstrap</h1>
        <p>简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。

          </p>
        <p><a class="btn btn-primary btn-lg" href="#" role="button">Bootstrap3中文文档</a></p>
        <a href="#">Bootstrap2中文文档</a>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                <div class="thumbnail">
                    <img src="./img/1.png" alt="...">
                    <div class="caption">
                      <h3>优站精选</h3>
                      <h4>Bootstrap 网站实例</h4>
                      <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
                     
                    </div>
                  </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                <div class="thumbnail">
                    <img src="./img/2.png" alt="...">
                    <div class="caption">
                      <h3>优站精选</h3>
                      <h4>是前端资源模块化管理和打包工具</h4>
                      <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
                     
                    </div>
                  </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                <div class="thumbnail">
                    <img src="./img/3.png" alt="...">
                    <div class="caption">
                      <h3>优站精选</h3>
                      <h4>用于构建用户界面的 JavaScript 框架</h4>
                      <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
                     
                    </div>
                  </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                <div class="thumbnail">
                    <img src="./img/4.png" alt="...">
                    <div class="caption">
                      <h3>优站精选</h3><h4>中文手册</h4>
                      <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
                     
                    </div>
                  </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                <div class="thumbnail">
                    <img src="./img/5.png" alt="...">
                    <div class="caption">
                      <h3>优站精选</h3><h4>中文网</h4>
                      <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
                     
                    </div>
                  </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                <div class="thumbnail">
                    <img src="./img/6.png" alt="...">
                    <div class="caption">
                      <h3>优站精选</h3><h4>中文文档</h4>
                      <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
                     
                    </div>
                  </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                <div class="thumbnail">
                    <img src="./img/7.png" alt="...">
                    <div class="caption">
                      <h3>优站精选</h3><h4>是一个 JavaScript 编译器。</h4>
                      <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
                     
                    </div>
                  </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                <div class="thumbnail">
                    <img src="./img/8.png" alt="...">
                    <div class="caption">
                      <h3>优站精选</h3><h4>中文文档 / 手册</h4>
                      <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
                     
                    </div>
                  </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                <div class="thumbnail">
                    <img src="./img/1.png" alt="...">
                    <div class="caption">
                      <h3>优站精选</h3><h4>中文文档</h4>
                      <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
                     
                    </div>
                  </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                <div class="thumbnail">
                    <img src="./img/2.png" alt="...">
                    <div class="caption">
                      <h3>优站精选</h3><h4>中文文档</h4>
                      <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
                     
                    </div>
                  </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                <div class="thumbnail">
                    <img src="./img/3.png" alt="...">
                    <div class="caption">
                      <h3>优站精选</h3><h4>中文文档</h4>
                      <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
                     
                    </div>
                  </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                <div class="thumbnail">
                    <img src="./img/4.png" alt="...">
                    <div class="caption">
                      <h3>优站精选</h3><h4>中文文档</h4>
                      <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
                     
                    </div>
                  </div>
            </div>
        </div>
        
  <div class="container">
      <div class="row footer-top">
        <div class="col-md-6 col-lg-6">
          <h4>
            <img src="https://cdn.jsdelivr.net/npm/@bootcss/www.bootcss.com@0.0.44/dist/img/logo.png">
          </h4>
          <p>我们一直致力于为广大开发者提供更多的优质技术文档和辅助开发工具！</p>
        </div>
        <div class="col-md-6  col-lg-6">
          <div class="row about">
            <div class="col-sm-3">
              <h4>关于</h4>
              <ul class="list-unstyled">
                <li><a href="/about/">关于我们</a></li>
                <li><a href="/ad/">广告合作</a></li>
                <li><a href="/links/">友情链接</a></li>
                <li><a href="/hr/">招聘</a></li>
              </ul>
            </div>
            <div class="col-sm-3">
              <h4>联系方式</h4>
              <ul class="list-unstyled">
                <li><a href="https://weibo.com/bootcss" title="Bootstrap中文网官方微博" target="_blank">新浪微博</a></li>
                <li><a href="mailto:admin@bootcss.com">电子邮件</a></li>
              </ul>
            </div>
            <div class="col-sm-3">
              <h4>旗下网站</h4>
              <ul class="list-unstyled">
                <li><a href="https://www.bootcdn.cn/" target="_blank">BootCDN</a></li>
                <li><a href="https://pkg.phpcomposer.com/" target="_blank">Packagist中国镜像</a></li>
              </ul>
            </div>
            <div class="col-sm-3">
              <h4>特别致谢</h4>
              <ul class="list-unstyled">
                <li><a href="https://www.maoyuncloud.com/" target="_blank">猫云</a></li>
                
              </ul>
            </div>
          </div>
  
        </div>
      </div>
      <hr/>
      <div class="row footer-bottom">
        <ul class="list-inline text-center">
          <li><a href="https://beian.miit.gov.cn/" target="_blank">京ICP备11008151号-6</a></li><li>京公网安备11010802014853</li>
        </ul>
      </div>
   
    </div>    
    <script src="./jquery.js"></script>
    <script src="./bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</body>

</html>